<template>
  <div class="orderTest-container">
    <div class="bigTitle" v-if="showTitle">
      ABOUT ME
    </div>
    <div style="margin-bottom: 20px;">你好!</div>

    <div class="tit">
      我是一名web开发人员
    </div>
    <div class="content">
      <div>1997生</div>
      <div>2018毕业于河北化工医药职业技术学院</div>
      <div>计算机网络专业</div>
      <div>web工作3年,我非常喜欢代码编程类,热爱钻研技术。</div>
      <div>因为热爱</div>
      <div>所以喜欢</div>
    </div>
    <div class="btn">
      <my-button
        showBg
        style="margin-right: 40px;margin-bottom: 120px;"
        @click="$router.push('/blog')"
      >
        博客
      </my-button>
    </div>
    <div class="progress">
      <div class="item" v-for="skill in skills" :key="skill.name">
        <div class="t">{{ skill.name }}</div>
        <el-progress
          :percentage="skill.p"
          :stroke-width="20"
          text-inside
          color="#6b84ff"
        ></el-progress>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "About",
    components: {},
    props: {
      showTitle: {
        type: Boolean,
        default: () => true,
      },
    },
    data() {
      return {
        skills: [
          {
            name: "HTML",
            p: 90,
          },
          {
            name: "CSS",
            p: 85,
          },
          {
            name: "JS",
            p: 80,
          },
          {
            name: "VUE",
            p: 80,
          },
          {
            name: "NODE",
            p: 70,
          },
        ],
      };
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {},
  };
</script>
<style lang="scss" scoped>
  // .bigTitle {
  //   color: #2c376d;
  //   font-size: 60px;
  //   font-weight: 600;
  //   text-align: right;
  //   margin-bottom: 100px;
  //   margin-top: 150px;
  //   position: relative;
  //   z-index: 2;
  //   &::before {
  //     content: "";
  //     position: absolute;
  //     top: -50px;
  //     right: -20px;
  //     width: 180px;
  //     height: 120px;
  //     z-index: -1;
  //     background-color: #12152f;
  //   }
  // }
  .tit {
    font-size: 32px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 10px;
    color: #fff;
  }
  .content {
    margin: 40px 0;
    color: #b0b0b2;
    font-size: 20px;
    line-height: 28px;
  }
  .item {
    margin-bottom: 20px;
  }
  .t {
    font-size: 20px;
    margin-bottom: 10px;
  }
  @media screen and (max-width: 798px) {
    .tit {
      font-size: 28px;
    }
  }
  @media screen and (max-width: 414px) {
    .tit {
      font-size: 24px;
    }
  }
</style>
